import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: {
      uname: "",
      phone: "",
      pic: "",
      uid: "",
    },
  },
  getters: {},
  mutations: {
    // 保存uname
    changeName(state, payload) {
      state.user.uname = payload;
    },
    // 保存phone
    changePhone(state, payload) {
      state.user.phone = payload;
    },
    // 保存pic
    changePic(state, payload) {
      state.user.pic = payload;
    },
    // 保存uid
    changeUid(state, payload) {
      state.user.uid = payload;
    },
  },
  actions: {},
  modules: {},

  plugins: [
    createPersistedState({
      // 存储方式：localStorage、sessionStorage、cookies
      storage: window.sessionStorage,
      // 存储的 key 的key值
      key: "store",
      render(state) {
        // 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
        return { ...state.user };
      },
    }),
  ],
});
